<!--
 * @Project_description: 模板页面
-->
<template>
  <d2-container class='page'>
    <!-- 顶部内容 -->
    <template slot='header'>
      <div class='base-header'>
        <!-- 左边 -->
        <div class='base-header-l'>
          <el-form
            ref='request'
            :disabled='loading'
            :inline='true'
            :model='request'
            class='header-form-inline'
            label-position='right'
            label-width='100px'>
            <!-- 文本 -->
            <el-form-item label='类型名称' prop='typeNameLike'>
              <el-input v-model='request.typeNameLike' clearable placeholder='请输入类型名称'></el-input>
            </el-form-item>
            <!-- 筛选 -->
            <el-form-item label='状态' prop='state'>
              <el-select v-model='request.state' placeholder='请选择状态'>
                <el-option :value='0' label='启用' />
                <el-option :value='1' label='禁用' />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 下方按钮组-->
          <div class='base-header-b' style='margin-left: 95px'>
            <div class='base-header-btn'>
              <el-button :disabled='loading' type='primary' @click='select'>搜索</el-button>
            </div>
            <div class='base-header-btn'>
              <el-button :disabled='loading' plain @click='reset'> 重置</el-button>
            </div>
          </div>
        </div>
        <!-- 右边按钮组 -->
        <div class='base-header-r'>
          <div class='base-header-btn'>
            <el-button v-if='_auth("add")' type='primary' @click='$refs.add.init()'>添加</el-button>
          </div>
          <!--          &lt;!&ndash; 导入下载模板 &ndash;&gt;-->
          <!--          <div class="base-header-btn">-->
          <!--            <el-button type="warning" @click="$refs.importExl.open=true"  v-if='_auth("import")'>导入</el-button>-->
          <!--            <y-import-exl @click='importExl'  @uploadTemplate='uploadTemplate' ref='importExl' />-->
          <!--          </div>-->
          <!--          <div class="base-header-btn">-->
          <!--            <el-button type="info" @click="expTableList" v-if='_auth("export")'>导出</el-button>-->
          <!--          </div>-->
        </div>
      </div>
    </template>
    <!-- 内容 -->
    <el-table ref='list' v-loading='loading' :data='list' :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all
              row-key='typeId' style='width: 100%'>
      <el-table-column label='类型Id' prop='typeId'>
        <template slot-scope='{row}'>
          <el-link type='primary' @click='_copy(row.typeId)'>{{ row.typeId|ellipsis }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label='类型名称' prop='typeName'>
      </el-table-column>
      <el-table-column label='类型编码' prop='typeCode'>
      </el-table-column>
      <el-table-column label='排序' prop='sortKey'></el-table-column>

      <el-table-column label='状态' prop='state'>
        <template slot-scope='{ row }'>
          <span v-if='row.state == 0' class='text-info'>启用</span>
          <span v-if='row.state == 1' class='text-error'>禁用</span>
        </template>
      </el-table-column>
      <el-table-column label='备注' prop='remarks'>
        <template slot-scope='{row}'>
          <y-remark v-model='row.remarks' />
        </template>
      </el-table-column>
      <el-table-column label='操作'>
        <template slot-scope='{ row }'>
          <span v-if='_auth("add")' class='base-row-btn' @click='$refs.add.init(null,row.typeId)'>添加</span>
          <span v-if='_auth("edit")' class='base-row-btn' @click='update(row)'>修改</span>
          <el-popconfirm v-if='_auth("del")' title='确定从列表中移除吗？' @confirm='deleteBy(row)'>
            <span slot='reference' class='base-row-btn'>删除</span>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <addVue ref='add' :menuList='list' @load='getList' />
  </d2-container>
</template>

<script>
import addVue from './components/add.vue'

export default {
  name: 'sysType',
  // import引入的组件需要注入到对象中才能使用
  components: {
    addVue,
  },
  data() {
    // 这里存放数据
    return {
      // 加载状态
      loading: false,
      //数据
      list: [],
      //总条数
      total: 0,
      //请求参数
      request: {
        typeNameLike: '',
        state: '',
        orgId: '',
      },
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
  },
  // 方法集合
  methods: {
    // tree
    async getList() {
      this.loading = true
      this.list = []
      try {
        let res = await this.$api.type.tree(this.request)
        this.list = res.data
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // put
    update(row) {
      //重新copy一份对象，不要在原本上修改
      let rows = this.deepClone(row)
      this.$refs.add.init(rows)
    },
    //delete
    async deleteBy(row) {
      // 删除
      await this.$api.type.del({
        typeId: row.typeId,
      })
      this.$message.success('删除成功')
      this.getList()
    },
    //翻页
    handleCurrentChange(val) {
      this.request.pageSize = val
      this.getList()
    },
    // 换页码
    handleSizeChange(e) {
      this.request.pageSize = e
      this.getList()
    },
    // 搜索
    select() {
      this.request.pageSize = 1
      this.getList()
    },
    // 重置
    reset() {
      this.request.pageSize = 1
      this.$refs.request.resetFields()
      this.getList()
    },
    /*表格操作*/
    // 导入表格
    importExl({ header, results }) {
      console.log(header, results)
      this.$message.success('导出成功')
      this.getList()
    },
    //下载空模板
    uploadTemplate() {
      //如果这个不满足,请查看控制台自行复制需要的
      let table = this._getTable(this.$refs.list)
      this._expTable(table, '类型导入模板')
    },
    // 导出list
    async expTableList() {
      const loading = this.$loading({
        text: '正在下载...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // 获取对象
      //如果这个不满足,请查看控制台自行复制需要的
      let table = this._getTable(this.$refs.list)
      //重新copy一份对象，不要在原本上修改
      let req = JSON.parse(JSON.stringify(this.request))
      req.pageNo = 1
      req.pageSize = 9999999
      try {
        let res = await this.$api.demo.list(req)
        this._expTable(table, '模板表', res.rows)
        loading.close()
      } catch (error) {
        this.$message.error('导出失败')
        loading.close()
        this.$log.push(error)
      }
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
